<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./icomoon-v1.0/style.css">
</head>
<body>
<!--
1、记住3个单词：grid(布局)、moudle(模块）、unit(单元)
-->
<div class="g-main">
    <!--导航-->
    <div class="g-nav">
        <ul class="u-lu">
            <li>
                <i></i>
                <a href="#" class="s-a">北京</a>
                <a href="#" class="s-a s-abox">切换城市</a>
                <i>[</i>
                <a href="#">门头沟</a>
                <a href="#">大厂回族自治区</a>
                <a href="#">廊坊</a>
                <i>]</i>
            </li>
            <li>
                <a href="#" class="s-amargin">立即登录</a>
                <a href="#">注册</a>
            </li>
        </ul>
        <ul class="u-ru">
            <li><a href="#">我的美团</a> </li>
            <li><a href="#">手机APP</a></li>
            <li><a href="#">商家中心</a></li>
            <li><a href="#">美团规则</a></li>
            <li><a href="#">网站导航</a></li>
        </ul>
    </div>
    <!--搜索-->
    <div class="g-search">
        <div class="m-box">
            <img src="./images/logo.png" alt="" class="m-logo">
            <div class="u-search">
                <input type="text" class="u-text" value="搜索商家或地点">
                <input type="button" class="u-button">
                <i></i>
            </div>
            <ul class="u-l">
                <li><a href="#">美团外卖</a></li>
                <li><a href="#">猫眼电影</a></li>
                <li><a href="#">美团酒店</a></li>
                <li><a href="#">民宿/公寓</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">美团公益</a></li>
            </ul>
        </div>
    </div>
    <!--内容-->
    <div class="g-subnav">
        <!--菜单-->

        <div class="m-side">
            <h5>全部分类</h5>
            <ul>
                <li><i class="u-food"></i>美食<i></i></li>
                <li><i class="u-waimai"></i>外卖<i></i></li>
                <li><i class="u-jiudian"></i>酒店<i></i></li>
                <li><i class="u-minsu"></i>民宿<i></i></li>
                <li><i class="u-jipiao"></i>机票/火车票<i></i></li>
                <li><i class="u-ktv"></i>休闲娱乐/KTV<i></i></li>
                <li><i class="u-jianshen"></i>运动健身/健身中心<i></i></li>
                <li><i class="u-jiazhuang"></i>家装/建材/家居<i></i></li>
                <li><i class="u-jiuba"></i>酒吧/密室逃脱<i></i></li>
                <li><i class="u-yiliao"></i>医疗健康/宠物中心<i></i></li>
                <li><i class="u-peixun"></i>学习培训/音乐培训<i></i></li>

            </ul>
        </div>
        <!--上部卡片-->
        <div class="s-box">
            <img src="./images/hotel.png" class="s-kp" alt="">
            <img src="./images/life.jpeg" class="s-kp2" alt="">
            <div class="s-box2">
                <img src="./images/avatar.jpeg" class="s-kp3" alt="">
                <ul class="s-ul">
                    <li>Hi! 你好</li>
                    <li><input type="button" class="s-zl" value="注册"></li>
                    <li><input type="button" class="s-zl" value="立即登录"></li>
                </ul>
            </div>
        </div>
        <!--下部卡片-->
        <div class="box">
            <img src="./images/hotel.png" class="kp" alt="">
            <img src="./images/other.jpeg" style="margin-left: 7px" alt="">
            <img src="./images/company.jpeg" class="kp2" alt="">
        <div class="box2">
            <img src="./images/erweima.png" alt="" class="kp3">
            <ul>
                <li style="color: #181818; font-size: 15px; font-weight: 700">美团APP手机版</li>
            </ul>
            <p style="text-align: center;font-weight: 700"><a style="color: #e74c3c; font-size: 15px">1元起</a>&nbsp;吃喝玩乐</p>
        </div>
        </div>
    </div>
</div>
</body>
</html>